<template>
  <div class="conten">
    <el-form
      ref="form"
      :rules="rules"
      :model="ruleForm"
      label-width="80px"
      label-position="top"
      class="form"
    >

      <el-form-item
        v-if="type == 6"
        label="跳转类型"
        prop="url_type"
      >
        <el-radio-group
          v-model="ruleForm.url_type"
          @change="onUrlTypechange"
        >
          <el-radio :label="1">短剧</el-radio>
          <el-radio :label="2">促销活动</el-radio>
        </el-radio-group>

      </el-form-item>

      <el-form-item
        v-if="ruleForm.url_type == 1"
        label="短剧标签"
        prop="tag_id"
      >
        <selectPlaylet
          type="tag"
          width="95%"
          :multiple="true"
          @result="tagsSelect"
        />
      </el-form-item>
      <el-form-item
        v-if="ruleForm.url_type == 1"
        label="短剧名称"
        prop="playlets"
      >
        <el-select
          v-model="ruleForm.playlets"
          remote
          filterable
          clearable
          multiple
          placeholder="请选择"
          style="width: 95%"
        >
          <el-option
            v-for="item in optionsList.playletList"
            :key="item.value"
            :label="item.label"
            :value="item"
          > </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.url_type == 2"
        label="上架活动"
        prop="activity_id"
      >
        <el-select
          v-model="ruleForm.activity_id"
          remote
          filterable
          :filter-method="onGetActivityList"
          clearable
          placeholder="请输入活动名称"
          style="width: 95%"
          @change="onActivityChange"
        >
          <el-option
            v-for="item in optionsList.activity"
            :key="item.id"
            :label="item.name + '/' + item.id"
            :value="item.id"
          > </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.url_type == 1"
        label="上架栏位"
        prop="type"
      >

        <el-checkbox-group
          v-model="ruleForm.type"
          class="checkboxgroup"
        >
          <span
            v-for="(item, index) in banberList"
            :key="index"
            style="display: flex;align-items: center;"
            class="checkbox_span"
          >
            <el-checkbox :label="item.type">
              {{ item.name }}
            </el-checkbox>
            <i
              class="el-icon-question icon"
              @click="showDetailImage(item)"
            ></i>
          </span>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.type.includes('5') "
        label="壁纸图片"
        prop="image_url"
      >
        <Upload
          tip="建议图片尺寸720*1280或比例 9:16，大小在2M以内，支持jpg、jpeg、png格式"
          :url="ruleForm.image_url"
          @resultUpload="onUpLoad"
        >
        </Upload>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.url_type == 2"
        prop="image_url"
        label="轮播图"
      >
        <Upload
          tip="建议图片尺寸720*1280或比例 9:16，大小在2M以内，支持jpg、jpeg、png格式"
          :url="ruleForm.image_url"
          @resultUpload="onUpLoadSwipper"
        >
        </Upload>
      </el-form-item>
      <div
        v-if="ruleForm.type.includes('6') && ruleForm.url_type == 1"
        class="roll_image"
      >
        <el-form-item>
          <template slot="label">
            <span>轮播图上传</span>
            <p class="image_msg">建议图片尺寸1280*720或比例 16:9，大小在2M以内，支持jpg、jpeg、png格式</p>
          </template>
          <BiTable
            v-if="ruleForm.playlets.length > 0"
            ref="table"
            row-key="id"
            :data="ruleForm.playlets"
            size="medium"
            :column="tableColums"
            fixed="sticky"
            fixed-offset="50"
            layout="total, prev, pager, next"
            :auto-scroll="false"
          >
            <template v-slot:roll_image="{ row }">
              <div class="images">
                <el-image
                  v-if="row.roll_image"
                  :src="row.roll_image"
                  style="width: 50px; border-radius: 5px"
                ></el-image>
                <p v-else-if="!row.error">未上传</p>
                <p
                  v-else
                  class="roll_image_null"
                >
                  请上传轮播图
                </p>
              </div>
            </template>
            <template v-slot:zip="{ row }">
              <div style="display: flex;">
                <Upload
                  tip="建议图片尺寸720*1280或比例 9:16，大小在2M以内，支持jpg、jpeg、png格式"
                  custom-style="1"
                  :row="row"
                  upload-class="upload-demo"
                  :url="row.roll_image"
                  @resultUpload="onUpLoadSwipperitem"
                >
                </Upload>
                <el-button
                  style="margin-left: 20px;"
                  size="small"
                  type="text"
                  @click="onDeletPlaylets(row)"
                >删除</el-button>
              </div>
            </template>
          </BiTable>
        </el-form-item>
      </div>
    </el-form>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          class="btn"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </div>
    <el-drawer
      :visible="showImage"
      size="420px"
      :modal="false"
      :modal-append-to-body="false"
      class="giftDetails"
      @close="showImage = false"
    >
      <div class="imageContent rowFlex allCenter">
        <el-image
          :src="imageSrc"
          fit="contain"
          style="width:338px;"
        ></el-image>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Upload from '../component/upload.vue'
import { templateList } from '@/api/active'
import { listingField } from '@/api/appContent/theater'
import { commonData, getranklist } from '@/api/common'
import { mapState } from 'vuex'
export default {
  components: {
    Upload
  },
  props: ['type'],
  computed: {
    ...mapState('user', ['mini_app_id', 'menu'])
  },
  data() {
    return {
      banberList: [
        { type: '1', name: '热门短剧', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515067_ZGHpAhcjh4.png' },
        { type: '2', name: '短剧排行', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713514991_aJMrNCbbWc.png' },
        // { type: '3', name: '介绍栏位', url: '	https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/33.png' },
        { type: '4', name: '短剧推荐', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515104_rctryEjxrb.png' },
        // { type: '5', name: '短剧壁纸', url: '	https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/55.png' },
        { type: '6', name: '轮播图', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515138_3hE3RD2Jrp.png' }
        // { type: '7', name: '充值档位' }
      ],
      imageSrc: '',
      showImage: false,
      loading: false,
      tableColums: [
        {
          label: '短剧信息',
          prop: 'label',
          minWidth: 170
        },
        {
          label: '轮播图',
          prop: 'roll_image',
          slotScope: true
        },
        {
          label: '操作',
          prop: 'zip',
          slotScope: true
        }
      ],
      ruleForm: {
        mini_app_id: localStorage.mini_app_id,
        type: [],
        tag_id: [],
        image_url: '',
        roll_image: '',
        url_type: 1,
        activity_id: '',
        playlets: []
      },

      optionsList: {
        playletList: [],
        activity: []
      },
      rules: {
        activity_id: [{ required: true, message: '请选择活动', trigger: 'blur' }],
        url_type: [{ required: true, message: '请选择跳转类型', trigger: 'blur' }],
        playlets: [{ required: true, message: '请选择短剧', trigger: 'blur' }],
        type: [{ required: true, message: '请选择上架栏位', trigger: 'change' }],
        image_url: [{ required: true, message: '请选择壁纸', trigger: 'change' }],
        roll_image: [{ required: true, message: '请选择轮播图', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.ruleForm.type.push(this.type)
    this.onGetPlayletList()
    this.onGetActivityList()
    this.ongetranklist()
  },
  methods: {
    onDeletPlaylets(row) {
      console.log(row, '>>>>>>>row')
      const findIndex = this.ruleForm.playlets.findIndex((item) => {
        return item.value == row.value
      })
      this.ruleForm.playlets.splice(findIndex, 1)
    },
    async ongetranklist() {
      const res = await getranklist()
      this.banberList = res.data.map((item, index) => {
        return {
          type: item.type + '',
          name: item.title,
          url: item.type == 1 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515067_ZGHpAhcjh4.png' : item.type == 2 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713514991_aJMrNCbbWc.png' : item.type == 4 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515104_rctryEjxrb.png' : item.type == 6 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515138_3hE3RD2Jrp.png' : ''
        }
      })
    },
    onUpLoadSwipperitem(url, type, row) {
      this.ruleForm.playlets.map((item, index) => {
        if (item.value == row.value) {
          this.$set(this.ruleForm.playlets[index], 'roll_image', url)
        }
      })
    },
    onUrlTypechange(value) {
      console.log(value)
      if (value == 2) {
        this.ruleForm.type = ['6']
      }
    },
    tagsSelect(value) {
      this.ruleForm.tag_id = value
      this.ruleForm.playlet_id = ''
      this.onGetPlayletList()
    },
    showDetailImage(item) {
      if (this.imageSrc === item.url) {
        this.showImage = false
        this.imageSrc = ''
      } else {
        this.imageSrc = item.url
        this.showImage = true
      }
    },
    playletSelect(value) {
      this.ruleForm.playlet_id = value
    },
    close() {
      this.$emit('cancel')
    },
    async onSubmit() {
      this.loading = true
      const params = {
        ...this.ruleForm
      }
      const arr = []
      let flang = false
      this.ruleForm.playlets.forEach((item, index) => {
        if (this.ruleForm.type.includes('6') && this.ruleForm.url_type == 1) {
          if (item.roll_image) {
            arr.push({
              playlet_id: item.value,
              roll_image: item.roll_image
            })
          } else {
            this.$set(this.ruleForm.playlets[index], 'error', true)
            flang = true
            return
          }
        } else {
          arr.push({
            playlet_id: item.value,
            roll_image: item.roll_image
          })
        }
      })
      if (flang) {
        this.loading = false
        return
      }
      params.playlets = arr
      this.$refs.form.validate((valid) => {
        if (valid) {
          const value = this.optionsList.playletList.find((item) => {
            return item.value === this.ruleForm.playlet_id
          })
          console.log(value, this.optionsList.playletList, this.ruleForm.playlet_id)
          // const miniapp = this.menu.find(item => item.id == this.mini_app_id)
          // if (miniapp && miniapp.app_type == 1 && value.check_status != 2) {
          //   this.$message.warning('微信小程序中，只能上架审核通过的合同剧或版本剧（版本剧关联的合同剧必须为审核通过状态)')
          //   return false
          // }
          // 1 非审核 2 审核
          if (this.ruleForm.image_url == 1 && value.type == '1') {
            this.$confirm(`未经微信小程序官方审核后的短剧，冒然上架到小程序栏位中，有被处罚的风险。`, '提示', {
              confirmButtonText: '仍要上架',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                this.listingField(params)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                })
              })
          } else {
            this.listingField(params)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.loading = false
    },
    listingField(params) {
      listingField(params).then((res) => {
        if (res.status_code == 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
        }
      })
    },
    async onGetActivityList(value = '') {
      const res = await commonData({
        type: 'activity',
        activity_type: 1,
        mini_app_id: this.ruleForm.mini_app_id,
        value: value
      })
      if (res.status_code == 1) {
        this.optionsList.activity = res.data.data
      }
    },
    async onGetPlayletList() {
      const res = await commonData({
        tag_id: this.ruleForm.tag_id,
        type: 'tagPlaylet',
        mini_app_id: this.ruleForm.mini_app_id
      })
      if (res.status_code == 1) {
        this.optionsList.playletList = res.data.data
      }
    },
    onUpLoad(url, type) {
      this.ruleForm.image_url = url
    },
    onUpLoadSwipper(url, type) {
      this.ruleForm.image_url = url
    },
    onActivityChange(value) {
      const indexActivity = this.optionsList.activity.find((item) => item.id == value)
      templateList().then((res) => {
        this.ruleForm.image_url = res.data.find((item) => item.id == indexActivity.template).banner
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.checkboxgroup {
  background: #f7f8fa;
  display: flex;
  align-items: center;
}
.checkbox_span {
  margin-left: 10px;
}
.checkbox_span::after {
  content: '';
  display: inline;
  width: 1px;
  height: 17px;
  border: 1px solid #d6d9e0;
  margin-left: 10px;
}
.roll_image {
  padding: 10px 16px;
  background: #f7f8fa;
  border-radius: 4px;
  .image_msg {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #86909c;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
  .roll_image_null {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #f53f3f;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
}
.conten {
  width: 600px;
  .form {
    padding: 20px;
    padding-bottom: 70px;
    ::v-deep .el-form-item__label {
      font-weight: 600;
    }
  }
}
.icon {
  font-size: 16px;
  color: #d9d9d9;
  margin-left: 5px;
  cursor: pointer;
}
.imageContent {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
}
.giftDetails {
  position: fixed;
  right: 602px;
  top: 0;
  box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05);
}
</style>
